<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Date Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Date</h1>
        </gs-jumbo><gs-jumbo bg-danger>
            <h2 class="text-center">WARNING: This element is deprecated, please use the <a href="doc-elem-datetime.html"><code>&lt;gs-datetime&gt;&lt;/gs-datetime&gt;</code></a> instead</h2>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
            <h3>Tag:</h3>
            <pre><code>&lt;gs-date&gt;&lt;/gs-date&gt;</code></pre>
            
            <h3>Description:</h3>
            <div>
                <p>The <code>&lt;gs-date&gt;</code> control is like the <code>&lt;gs-text&gt;</code> control, but it is specialized for dates.</p>
                <p>When working with dates on a website we heavily prefer slash delimited dates because a dash delimited date (in some cases) will text wrap, and you want everything to be consistent so please use slash delimited dates.</p>
            </div>
            
            <h1>Examples:</h1>
            <div class="doc-example-description">
                <span class="h3">Skeleton Example:</span>
               <p>A basic <code>&lt;gs-date&gt;</code> element. Without attributes the gs-date control will have the following behaviors:</p>
               <ol>
                    <li>There is a button that activates the date picker.</li>
                    <li>After choosing a date using the date picker, the date picker disappears and the data changes in the control.</li>
                    <li>You can also change the date manually.</li>
                    <li>
                        When the value is a date that is slash or dash delimited:
                        <ol>
                            <li>Clicking into the date will select the closest part of the date.</li>
                            <li>Arrowing up or down will increase the value of the date depending on the part you have selected.</li>
                            <li>Arrowing left or right will select the next or previous part.</li>
                            <li>Pressing or "/" or "-" will select the next part.</li>
                            <li>Pressing any number will overwrite the number of the part you have selected.</li>
                        </ol>
                    </li>
                </ol>
            </div>
            <gs-doc-example>
                <template for="html" height="20">
                    <label for="date_example">Date Example:</label>
                    <gs-date id="date_example"></gs-date>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                    <span class="h3">Attribute <code>[column]</code>:</span>
                    <p>When you have a <code>gs-date</code> inside a data element and you want to use it to display cell data you use the <code>column</code> attribute.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="10">
                        <gs-form src="gsdoc.tpeople" where="id=2341">
                            <template>
                                <b>Birth Date:</b>
                                <gs-date column="birth_date" disabled></gs-date>
                            </template>
                        </gs-form>
                    </template>
                </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[onchange=""]</code>:</span>
                <p>To run javascript when the value changes, use the <code>[onchange=""]</code> attribute.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="15">
                    <label for="control_default">Change Alert:</label>
                    <gs-date id="control_default" onchange="alert('value changed')"></gs-date>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[value=""]</code>:</span>
                <p>To set the value for the <code>&lt;gs-date&gt;</code>, use the <code>[value=""]</code> attribute.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="5">
                    <gs-date value="05/05/05"></gs-date>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                    <span class="h3">Attribute <code>[qs=""]</code>:</span><br />
                    <p>The name <code>[qs]</code> stands for "querystring". The querystring is the part in the URL after the "?". The <code>[qs]</code> attribute has two formats, each with their own use.</p>
                    
                    <ul>
                        <li>qs="<i>key1</i>=<i>attribute1</i>". This format allows you to fill any attribute with any key from the querystring. To use multiple keys from the querystring you can put a comma-separated list of these expressions (for example: qs="<i>key1</i>=<i>attribute1</i>,<i>key2</i>=<i>attribute2</i>"). If you need an attribute to be added when a querystring key is not present, replace the "=" with "!=" (for example: qs="<i>key1</i>!=<i>attribute1</i>", attribute1 will only be added if key1 is not in the querystring). As a shorthand, if the key in the querystring is the same name as the attribute you want to fill, you can omit the attribute name in the expression (for example: qs="<i>key1</i>="). If an expression doesn't find it's key in the querystring: it reverts the attribute that it fills to it's original value.</li>
                        <li>qs="<i>key</i>". This format will update the <code>[value]</code> attribute with the querystring whenever the querystring changes.</li>
                    </ul>
                </div>
                <gs-doc-example query-string="test1=4/4/44&test2=4/4/44">
                    <template for="html" height="35">
                        <gs-date qs="test1"></gs-date>
                        <gs-date qs="test2=value" value="1-1-2011"></gs-date>
                        <gs-date qs="test3=hidden"></gs-date>
                        <gs-date qs="test4!=hidden"></gs-date>
                        <br />
                        <br />
                        <gs-grid widths="1,1">
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test1=5/5/5');">Add "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test1');">Remove "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test2=5/5/5');">Add "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test2');">Remove "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test3=yes');">Add "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test3');">Remove "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test4=yes');">Add "test4"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test4');">Remove "test4"</gs-button>
                            </gs-block>
                            </gs-grid>
                    </template>
                </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[placeholder=""]</code>:</span>
                <p>The <code>[placeholder=""]</code> attribute can be used when you don't want to use a label to explain the purpose of the control to the user. (The label and the placeholder can be used together, that's just not what normally happens.)</p>
            </div>
            <gs-doc-example>
                <template for="html" height="15">
                    <label for="control_label">Label:</label>
                    <gs-date id="control_label"></gs-date>
                    <label for="control_placeholder_label">Placeholder And Label:</label>
                    <gs-date placeholder="Placeholder And Label" id="control_placeholder_label"></gs-date>
                    <gs-date placeholder="Placeholder" id="control_placeholder"></gs-date>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[mini]</code>:</span>
                <p>Sometimes you are limited on space. The <code>[mini]</code> attribute can be used to make the <code>&lt;gs-date&gt;</code> smaller.</p>
            </div>
            <gs-doc-example>
                <template for="html">
                    <label for="control_mini">Mini:</label>
                    <gs-date id="control_mini" mini></gs-date>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[no-picker]</code>:</span>
                <p>If you want to remove the date picker button, simply add the <code>[no-picker]</code> attribute.</p>
            </div>
            <gs-doc-example>
                <template for="html">
                    <label for="date_mini">No Picker:</label>
                    <gs-date no-picker id="date_mini"></gs-date>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[tabindex=""]</code>:</span>
                <p>With the <code>[tabindex=""]</code> attribute, you can control what order your controls are tabbed to.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="25">
                    <label for="control_1">1:</label>
                    <gs-date tabindex="1" id="control_1"></gs-date>
                    <label for="control_3">3:</label>
                    <gs-date tabindex="3" id="control_3"></gs-date>
                    <label for="control_2">2:</label>
                    <gs-date tabindex="2" id="control_2"></gs-date>
                    <label for="control_4">4:</label>
                    <gs-date tabindex="4" id="control_4"></gs-date>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[disabled]</code>:</span>
                <p>With the <code>[disabled]</code> attribute, you can control whether or not you can use the control.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="15">
                    <label for="control_disabled">Disabled:</label>
                    <gs-date disabled id="control_disabled"></gs-date>
                    <label for="control_enabled">Not Disabled:</label>
                    <gs-date id="control_enabled"></gs-date>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[readonly]</code>:</span><br />
                <p>The <code>[readonly]</code> attribute is similar to <code>[disabled]</code> because it prevents the value from changing. The differences are that readonly is styled differently and allows you to copy the current text from the control.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="15">
                    <label for="control_readonly">Read Only:</label>
                    <gs-date id="control_readonly" readonly value="05/05/05"></gs-date>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[format]</code>:</span><br />
                <p>The <code>[format]</code> attribute describes how the date you want to edit is structured.</p>
                <p>The following format names are accepted:</p>
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Example</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td>01/01/2015</td>
                        </tr>
                        <tr>
                            <td>shortdate</td>
                            <td>1/1/15</td>
                        </tr>
                        <tr>
                            <td>mediumdate</td>
                            <td>Jan 1, 2015</td>
                        </tr>
                        <tr>
                            <td>longdate</td>
                            <td>January 1, 2015</td>
                        </tr>
                        <tr>
                            <td>fulldate</td>
                            <td>Thursday, January 1, 2015</td>
                        </tr>
                        <tr>
                            <td>isodate</td>
                            <td>2015-01-01</td>
                        </tr>
                        <tr>
                            <td>isodatetime</td>
                            <td>2015-01-01T00:00:00</td>
                        </tr>
                    </tbody>
                </table>
                <p>You can specify your own format with these specifiers:</p>
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Output</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>y</td>
                            <td>Full year</td>
                        </tr>
                        <tr>
                            <td>yyyy</td>
                            <td>Full year</td>
                        </tr>
                        <tr>
                            <td>yy</td>
                            <td>Last two digits of the year</td>
                        </tr>
                        <tr>
                            <td>M</td>
                            <td>Month number</td>
                        </tr>
                        <tr>
                            <td>MM</td>
                            <td>Padded month number</td>
                        </tr>
                        <tr>
                            <td>MMM</td>
                            <td>Short month name</td>
                        </tr>
                        <tr>
                            <td>MMMM</td>
                            <td>Full month name</td>
                        </tr>
                        <tr>
                            <td>d</td>
                            <td>Day of the month</td>
                        </tr>
                        <tr>
                            <td>dd</td>
                            <td>Padded day of the month</td>
                        </tr>
                        <tr>
                            <td>EEE</td>
                            <td>Short day name</td>
                        </tr>
                        <tr>
                            <td>EEEE</td>
                            <td>Full day name</td>
                        </tr>
                        <tr>
                            <td>H</td>
                            <td>Hour number (24-hour, midnight 0)</td>
                        </tr>
                        <tr>
                            <td>HH</td>
                            <td>Padded hour number (24-hour, midnight 0)</td>
                        </tr>
                        <tr>
                            <td>h</td>
                            <td>Hour number (12-hour)</td>
                        </tr>
                        <tr>
                            <td>hh</td>
                            <td>Padded hour number (12-hour)</td>
                        </tr>
                        <tr>
                            <td>K</td>
                            <td>Hour number (24-hour, midnight 12)</td>
                        </tr>
                        <tr>
                            <td>KK</td>
                            <td>Padded hour number (24-hour, midnight 12)</td>
                        </tr>
                        <tr>
                            <td>AM</td>
                            <td>AM/PM</td>
                        </tr>
                        <tr>
                            <td>m</td>
                            <td>Minutes</td>
                        </tr>
                        <tr>
                            <td>mm</td>
                            <td>Padded minutes</td>
                        </tr>
                        <tr>
                            <td>s</td>
                            <td>Seconds</td>
                        </tr>
                        <tr>
                            <td>ss</td>
                            <td>Padded seconds</td>
                        </tr>
                        <tr>
                            <td>S</td>
                            <td>Milliseconds</td>
                        </tr>
                        <tr>
                            <td>SS</td>
                            <td>Padded milliseconds (length 2)</td>
                        </tr>
                        <tr>
                            <td>SSS</td>
                            <td>Padded milliseconds (length 3)</td>
                        </tr>
                    </tbody>
                </table>
                <p><b>NOTE:</b> If you have a time in your format, arrowing will not work. Use a <code>&lt;gs-timestamp&gt;</code> instead.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="25">
                    <gs-date format="" value="01/01/2015"></gs-date>
                    <gs-date format="shortdate" value="1/1/15"></gs-date>
                    <gs-date format="mediumdate" value="Jan 1, 2015"></gs-date>
                    <gs-date format="longdate" value="January 1, 2015"></gs-date>
                    <gs-date format="fulldate" value="Thursday, January 1, 2015"></gs-date>
                    <gs-date format="isodate" value="2015-01-01"></gs-date>
                    <gs-date format="isodatetime" value="2015-01-01T00:00:00"></gs-date>
                    <gs-date format="yyyy-mm-dd KK:mm:ss.SSS" value="2015-01-01 00:00:00"></gs-date>
                </template>
            </gs-doc-example>
        </gs-container>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>
